<template>
  <div class="tips mt-4 flex justify-between">
    <el-alert
      class="code"
      :title="tips.code == 200 ? 'OK' : 'Fail'"
      :type="tips.code == 200 ? 'success' : 'error'"
      effect="dark"
      center
      :closable="false"
    />
    <el-alert class="message" :title="tips.message" type="info" :closable="false" />
  </div>
</template>

<script lang="ts" setup>
//定义接收的props
const props = defineProps({
  // 定义一个对象类型的 prop
  tips: {
    type: Object,
    default: () => ({ code: '', message: '' })
  }
})
</script>

<style scoped lang="less">
/* 组件样式 */
.tips {
  .code {
    width: 100px;
    height: 60px;
  }
  .message {
    width: calc(100% - 120px);
  }
  :deep(.el-alert__title) {
    font-size: 18px;
  }
}
</style>
